<template>
  <div class="announcement">
    <div class="search-panel">
      <el-form :inline="true" :model="form" class="search-panel--left" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type='primary' icon="el-icon-download" @click="exportData" v-hasPermission="'export'">导出</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="search-panel--right">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="open" v-hasPermission="'add'">添加</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="batch" v-hasPermission="'deletes'">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <main-table
      ref="table"
      :loading="loading"
      :pageTotal="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
      :data="tableData"
      :columns="columns"
      row-key="areacode"
      :currentPage.sync="pageNum"
      :handleColumns="handleColumns"
      :columnType="columnType"
      :header-cell-style="{'text-align':'center'}"
      border>
      <template slot-scope="scope" slot="handle">
        <el-button type="text" @click="edit(scope)" title="编辑" v-if="editPermisson">
          <icon-svg name="edit"></icon-svg>
        </el-button>
        <el-button type="text"  @click="remove(scope)" title="删除" v-if="deletePermisson">
          <icon-svg name="delete"></icon-svg>
        </el-button>
      </template>
    </main-table>
    <main-layer ref="layer" :tree="tableData"  @refresh="search"/>
  </div>
</template>
<script>
import MainLayer from './components/layer';
export default {
  components: {
    MainLayer
  },
  data() {
    return {
      form: {
        title: ''
      },
      pageTotal: 0,
      loading: false,
      columnType: ['selection', 'index'],
      columns: [
        { label: '公告标题', prop: 'title', width: 600, align: 'left' },
        { label: '公告状态', prop: 'noticestatus',
          formatter: (row, column, cellValue, index) => {
            if (cellValue === 1) {
              return '上线';
            } else {
              return '下线';
            }
          }
        },
        { label: '发布时间', prop: 'createtime' },
        { label: '发布人', prop: 'publishname',
          formatter: (row, column, cellValue, index) => {
            return cellValue || '--';
          }
        }
      ],
      handleColumns: {
        label: '操作', align: 'center', fixed: 'right', width: 150
      },
      multipleSelection: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20
    };
  },
  computed: {
    editPermisson() { return this.$hasPermission('edit'); },
    deletePermisson() { return this.$hasPermission('delete'); }
  },
  methods: {
    batch() {
      if (this.multipleSelection.length) {
        const ids = this.multipleSelection.map(v => v.noticeid);
        this.$confirm(`是否删除该这${ids.length}条记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteData(ids);
        }).catch(() => {

        });
      } else {
        this.$message({
          message: '请至少选择一项',
          type: 'warning'
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    open() {
      this.$refs.layer.openDialog();
    },
    edit(scope) {
      console.log(scope);
      this.$refs.layer.openDialogByEdit(scope.row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        console.log(`当前页: ${val}`, val);
        this.pageNum = val;
        this.getDataList();
      }
    },
    search() {
      this.pageNum = 1;
      this.getDataList();
    },
    getDataList() {
      const pageSize = this.pageSize;
      const pageNum = this.pageNum;
      const params = {
        url: `/service-base/publishnotice/list/${pageSize}/${pageNum}`,
        type: 'post',
        params: {
          title: this.form.title
        }
      };
      this.loading = true;
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { data, success } = resp;
        if (success) {
          this.tableData = data.data;
          this.pageTotal = data.total;
        }
      });
    },
    remove(scope) {
      console.log(scope);
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData([scope.row.noticeid]);
      }).catch(() => {

      });
    },
    deleteData(ids) {
      const params = {
        url: `/service-base/publishnotice/delete`,
        type: 'delete',
        params: ids
      };
      this.$ajax(params).then(resp => {
        const { success } = resp;
        if (success) {
          this.$message({ type: 'success', message: '删除成功!' });
        }
        this.getDataList();
      });
    },
    exportData() {
      this.exportType = true;
      const params = {
        url: '/service-base/publishnotice/list',
        type: 'post',
        params: {
          title: this.form.title
        }
      };
      this.$ajax(params).then(res => {
      // 获取数据
        const { success, data } = res;
        if (success) {
          for (let i = 0, len = data.data.length; i < len; i++) {
            data.data[i].noticestatus = data.data[i].noticestatus === 1 ? '上线' : '下线';
          }
          this.JSONToExcelConvertor(this.columns, data.data, '公告信息');
        }
      });
    }
  },
  created() {
    this.getDataList();
  }
};
</script>

<style lang="scss" scoped>
.announcement{

}
</style>
